<template>
  <div>
    <div class="header">
      <router-link to="/water">
        <img src="@/assets/tap-water/images/fh.png" alt="">
      </router-link>
      <h2>水质公示</h2>
    </div>
    <ul class="gs01">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <li v-for="item in list" :key="item.id">
          <router-link :to="{path:'/tap-water/szgsDetail',query:{id:item.id}}">
            <span>{{item.noticeTitle}}</span>
            <img src="@/assets/tap-water/images/fh03.png" alt="">
          </router-link>
          <p>{{item.createTimeStr}}</p>
        </li>
      </van-list>
    </ul>
  </div>
</template>

<script>
  import home from '@/api/tap-water/home';
  import Vue from 'vue'
  import {List} from 'vant';

  Vue.use(List);

  export default {
    data() {
      return {
        list: [],
        page: 1,
        limit: 10,
        pageAll: 0,
        loading: false,
        finished: false,
        noData: false, // 如果没有数据，显示暂无数据
      };
    },
    methods: {
      getSjxiList(page, limit, type) {
        home.getListByType(page, limit, type)
                .then(response => {
                  this.page++;
                  this.pageAll = Math.ceil(response.data.count / this.limit);
                  this.list = this.list.concat(response.data.data);

                  // 如果没有数据，显示暂无数据
                  if (this.list.length === 0 && this.page === 1) {
                    this.noData = true
                  }
                  // 如果加载完毕，显示没有更多了
                  if (response.data.data.length === 0) {
                    this.finished = true
                  }

                  // 加载状态结束
                  this.loading = false;

                  // 数据全部加载完成
                  if (this.page > this.pageAll) {
                    this.finished = true;
                  }
                });
      },
      onLoad: function () {
        this.getSjxiList(1, 10, "水质公示");
      },
    }
  }
</script>

<style scoped>
@import "../../assets/tap-water/css/base.css";
@import "../../assets/tap-water/css/other.css";
@import "../../assets/sfj/css/resetui.css";
</style>
